{extend name="index/index" /}

{block name="main"}
<!-- Portfolio Teasers
		================================================== -->
        
        <div class="sixteen columns row divide notop">
        	<h3 class="titledivider">Sidebar Left Page Shortcodes.</h3>
            <div class="dividerline"></div>
        </div>
        
        <!-- Content Holder -->
		<div class="eleven columns offset-by-one row content right">
        
        	<!-- Link Style -->
            <h6>Link Styles</h6>
            <div class="one_third">
            	<p>There are various types of link / button shortcodes at your disposal.</p> 
            </div>
            <div class="two_third lastcolumn">
                <p>
                	<a href="#" class="bigcomment" style="margin:10px;"></a>
                    <a href="#" class="bigdoc" style="margin:10px;"></a>
                    <a href="#" class="bigplus" style="margin:10px;"></a>
                    <a href="#" class="link" style="margin:10px;">&raquo; Underlined</a>
                    <a href="#" class="linkbg" style="margin:10px;">Background</a>
                    <a href="#" class="button" style="margin:10px;">&raquo; Button</a>
                </p>
            </div><div class="clear"></div>
        
        	<!-- 1 column -->
            <h6>1/1</h6>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 

            <!-- 2 column -->
            <div class="one_half">
            	<h6>1/2</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_half lastcolumn">
            	<h6>1/2</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
            <!-- 3 column -->
            <div class="one_third">
            	<h6>1/3</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_third">
            	<h6>1/3</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 	
            </div>
            <div class="one_third lastcolumn">
            	<h6>1/3</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 	
            </div><div class="clear"></div>
        
        	<!-- 4 column -->
        	<div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth lastcolumn">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
            <!-- Content Tabs -->
        	<ul class="tabs">
                <li><a class="active" href="#concept">Concept</a></li>
                <li><a href="#design">Design</a></li>
                <li><a href="#support">Support</a></li>
            </ul>
            <ul class="tabs-content clearfix">
                <li class="active clearfix" id="concept">
                    <div class="two_third"><h6>2/3</h6><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></div>
                    <div class="one_third lastcolumn"><h6>1/3</h6><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div>
                </li>
                <li id="design" class="clearfix">
                    <div class="one_third"><h6>1/3</h6><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div>
                    <div class="two_third lastcolumn"><h6>2/3</h6><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></div>
                </li>
                <li id="support" class="clearfix">
                    <div class="one_third">
                        <h6>1/3</h6>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
                    </div>
                    <div class="one_third">
                        <h6>1/3</h6>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
                    </div>
                    <div class="one_third lastcolumn">
                        <h6>1/3</h6>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
                    </div>
                </li>
            </ul>
            
            <!-- 2 column Videos -->
            <div class="one_half">
            	<h6>Vimeo</h6>
            	<p><div class="scalevid"><iframe src="#video/24243147?title=0&amp;byline=0&amp;portrait=0" width="460" height="259"></iframe></div></p>
            </div>
            <div class="one_half lastcolumn">
            	<h6>Youtube</h6>
            	<p><div class="scalevid"><iframe src="#embed/I_ClNxSST4M?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="460" height="259"></iframe></div></p>
            </div><div class="clear"></div>
            
            <!-- Quotes -->
            <div class="one_half">
            	<h6>Blockquote</h6>
            	<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </blockquote>
            </div>
            <div class="one_half lastcolumn">
            	<h6>List</h6>
            	<ul class="square">
                    <li>Flexible Layout</li>
                    <li>Compatible with Common Browsers, Smartphones and Tablet Pc's</li>
                    <li>Background Images / Tiles</li>
                    <li>Column or Full-Width Site Style</li>
                </ul>
            </div><div class="clear"></div>
            
		</div>
        
        <!-- Sidebar
        ================================================== -->

        <div class="four columns sidebar content">
            
            <div class="widget">
                <h5>Latest Projects</h5>
                <div class="widget_portfolio">
                    <ul>
                        <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio1.jpg" alt="" /></a></li>
                        <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio2.jpg" alt="" /></a></li>
                        <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio3.jpg" alt="" /></a></li>
                        <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio4.jpg" alt="" /></a></li>
                        <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio5.jpg" alt="" /></a></li>
                        <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio6.jpg" alt="" /></a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
            
            <div class="widget">
            	<h5>Contact Info</h5>
            	<div>
                    <a href="#" class="link">Company Location</a><br/>
                    Apex Studios, Cologne City Branch<br/>
                    Mainstreet 123<br/>
                    50600, Cologne, Germany<br/><br/>
                    
                    <a href="#" class="link">How To Contact Us</a><br/>
                    Email: <a href="mailto:your@email.com" class="linkbg">info@yourdomain.com</a><br/>
                    Phone: 800.123.4567<br/><br/>
                    
                    <a href="#" class="link">Office Hours</a><br/>
                    Mondays-Friday: 09:00 - 18:00<br/>
                    Saturday: 10:00 - 15:00
                </div>
            </div>
            
            <div class="widget">
                <h5>Popular Blog Posts</h5>
                <div class="widget_blogposts">
                    <ul>
                        <li class="clearfix">
                            <a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_blog1.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Pretty Widgets</a></div>
                            <div class="subline">January 23, 2012</div>
                        </li>
                        <li class="clearfix">
                            <a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_blog2.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Convenient Structure</a></div>
                            <div class="subline">January 21, 2012</div>
                        </li>
                        <li class="clearfix">
                            <a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_blog3.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Another Blog Post</a></div>
                            <div class="subline">January 17, 2012</div>
                        </li>
                        <li class="clearfix">
                            <a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_blog4.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Responsive Layout</a></div>
                            <div class="subline">January 3, 2012</div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
    
        </div>
        
        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
   
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap">
        <div class="footer">
        	<div class="sixteen columns">
            
                <div class="four columns widget alpha">
                    <h5>Latest Projects</h5>
                    <div class="widget_portfolio">
                        <ul>
                        	<li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio1.jpg" alt="" /></a></li>
                        	<li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio2.jpg" alt="" /></a></li>
                            <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio3.jpg" alt="" /></a></li>
                            <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio4.jpg" alt="" /></a></li>
                            <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio5.jpg" alt="" /></a></li>
                            <li class="clearfix"><a href="#" class="borderhover"><img src="/static/index/images/thumbs/pop_folio6.jpg" alt="" /></a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                <div class="four columns cleafix widget">
                   <h5>Twitter Feed</h5>
                   <!-- Twitter Embedded Timeline Markup Replace Here Start -->
                   With the Twitter API 1.1 you need to go <a href="https://twitter.com/settings/widgets" target="_blank">here</a> to create a twitter widget.<br/>
				   Paste the generated code here!
				   <!-- Twitter Embedded Timeline Markup Replace Here End -->
                </div>
                
                <div class="four columns widget">
                    <h5>Popular Blog Posts</h5>
                    <div class="widget_blogposts">
                        <ul>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog1.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Pretty Widgets</a></div>
                                <div class="subline">January 23, 2012</div>
                            </li>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog2.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Convenient Structure</a></div>
                                <div class="subline">January 21, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog3.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Another Blog Post</a></div>
                                <div class="subline">January 17, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog4.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Responsive Layout</a></div>
                                <div class="subline">January 3, 2012</div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                <div class="four columns widget omega">
                    <h5>Quick Contact</h5>
                    <div>
                        <form id="quickcontact" method="post" action="#">
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onFocus="if(this.value == 'Name *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Name *'; }" value='Name *'/>
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onFocus="if(this.value == 'Email *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Email *'; }" value='Email *'/>
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onFocus="if(this.value == 'Message *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send</button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div><div class="clear"></div>
                
            </div>
        </div>
	</div>
{/block}